<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="apple-touch-icon" sizes="76x76" href="/static/image/logo.png">
    <link rel="icon" type="image/png" href="/static/image/logo.png">
    <title>
        markdownEditor
    </title>
    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css"
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
    <!-- Nucleo Icons -->
    <link href="/static/assets/css/nucleo-icons.css" rel="stylesheet" />
    <link href="/static/assets/css/nucleo-svg.css" rel="stylesheet" />
    <!-- Font Awesome Icons -->
    <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
    <!-- CSS Files -->
    <link id="pagestyle" href="/static/assets/css/material-dashboard.css?v=3.0.0" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/static/assets/css/ele-index.css">
    <link rel="stylesheet" href="/static/editormd/css/editormd.css" />
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body class="g-sidenav-show bg-gray-200">
    {% verbatim myblock %}
    <div id="app" v-cloak v-loading="loading">
        <aside
            class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-3   bg-gradient-dark"
            id="sidenav-main">
            <div class="sidenav-header">
                <i class="fas fa-times p-3 cursor-pointer text-white opacity-5 position-absolute end-0 top-0 d-none d-xl-none"
                    aria-hidden="true" id="iconSidenav"></i>
                <a class="navbar-brand m-0" href="#" v-if="nick_name === '_'">
                    <img src="/static/image/logo.png" class="navbar-brand-img h-100" alt="main_logo">
                    <span class="ms-1 font-weight-bold text-white">Black White Site</span>
                </a>
                <a class="navbar-brand m-0" href="/pages/personalPage.html" v-if="nick_name !== '_'">
                    <img :src="user_avatar" class="navbar-brand-img h-100" alt="main_logo">
                    <span class="ms-1 font-weight-bold text-white">您好 {{ nick_name}}</span>
                </a>
            </div>
            <hr class="horizontal light mt-0 mb-2">
            <div class="collapse navbar-collapse  w-auto  max-height-vh-100" id="sidenav-collapse-main">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link text-white bg-gradient-primary" href="#" onclick="toggleSidenav()"
                            style="background: black !important;">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">close</i>
                            </div>
                            <span class="nav-link-text ms-1">关闭侧边栏</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="/pages/homePage.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">home</i>
                            </div>
                            <span class="nav-link-text ms-1">社区·圈子</span>
                        </a>
                    </li>
                    <li class="nav-item mt-3">
                        <h6 class="ps-4 ms-2 text-uppercase text-xs text-white font-weight-bolder opacity-8">My Space
                        </h6>
                    </li>
                    <li class="nav-item" v-if="nick_name !== '_'">
                        <a class="nav-link text-white " href="/pages/personalPage.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">person</i>
                            </div>
                            <span class="nav-link-text ms-1">我的主页</span>
                        </a>
                    </li>
                    <li class="nav-item" v-if="nick_name !== '_'">
                        <a class="nav-link text-white active bg-gradient-primary" href="#" onclick="toggleSidenav()">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="fa fa-bandcamp" aria-hidden="true"></i>
                            </div>
                            <span class="nav-link-text ms-1">新建文章</span>
                        </a>
                    </li>
                    <li class="nav-item" id="login_aside" v-if="nick_name === '_'">
                        <a class="nav-link text-white " href="/pages/sign-in.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">login</i>
                            </div>
                            <span class="nav-link-text ms-1">登录</span>
                        </a>
                    </li>
                    <li class="nav-item" id="register_aside" v-if="nick_name === '_'">
                        <a class="nav-link text-white " href="/pages/sign-up.html">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <i class="material-icons opacity-10">assignment</i>
                            </div>
                            <span class="nav-link-text ms-1">注册</span>
                        </a>
                    </li>
                    <li class="nav-item" id="logout_aside" v-if="nick_name !== '_'">
                        <a class="nav-link text-white " href="#" @click="logout">
                            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                                <!-- <i class="material-icons opacity-10">assignment</i> -->
                                <i class="ni ni-user-run"></i>
                            </div>
                            <span class="nav-link-text ms-1">退出登录</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sidenav-footer position-absolute w-100 bottom-0 ">
                <div class="mx-3">
                </div>
            </div>
        </aside>
        <div class="main-content position-relative bg-gray-100 max-height-vh-100 h-100">
            <!-- Navbar -->
            <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur"
                navbar-scroll="true">
                <div class="container-fluid py-1 px-3">
                    <!-- 头部左侧 -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
                            <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark"
                                    href="javascript:;">Pages</a></li>
                            <li class="breadcrumb-item text-sm text-dark active" aria-current="page">新增文章</li>
                        </ol>
                        <h6 class="font-weight-bolder mb-0">N E W !</h6>
                    </nav>
                    <!-- 头部右侧 -->
                    <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                        <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                            <div class="input-group input-group-outline">
                                <label class="form-label">Type here search</label>
                                <input type="text" class="form-control" disabled>
                            </div>
                        </div>
                        <ul class="navbar-nav  justify-content-end" id="right_ul">
                            <li class="nav-item d-flex align-items-center">
                                <a href="/pages/sign-in.html" class="nav-link text-body font-weight-bold px-0"
                                    v-if="nick_name === '_'">
                                    <i class="fa fa-user me-sm-1"></i>
                                    <span class="d-sm-inline d-none">登录/注册</span>
                                </a>
                            </li>
                            <!-- 侧边栏显示与否 -->
                            <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
                                <a href="javascript:;" class="nav-link text-body p-0" id="iconNavbarSidenav">
                                    <div class="sidenav-toggler-inner">
                                        <i class="sidenav-toggler-line"></i>
                                        <i class="sidenav-toggler-line"></i>
                                        <i class="sidenav-toggler-line"></i>
                                    </div>
                                </a>
                            </li>
                            <li class="nav-item px-3 d-flex align-items-center">
                                <a href="javascript:;" class="nav-link text-body p-0">
                                    <!-- 展示关键 fixed-plugin-button-nav -->
                                    <i class="fa fa-cog fixed-plugin-button-nav cursor-pointer"></i>
                                </a>
                            </li>
                            <li class="nav-item dropdown pe-2 d-flex align-items-center">
                                <a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuButton"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fa fa-bell cursor-pointer"></i>
                                </a>
                                <ul class="dropdown-menu  dropdown-menu-end  px-2 py-3 me-sm-n4"
                                    aria-labelledby="dropdownMenuButton">
                                    <li class="mb-2">
                                        <a class="dropdown-item border-radius-md" href="javascript:;">
                                            <div class="d-flex py-1">
                                                <div class="my-auto">
                                                    <img src="/static/assets/img/team-2.jpg"
                                                        class="avatar avatar-sm  me-3 ">
                                                </div>
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="text-sm font-weight-normal mb-1">
                                                        <span class="font-weight-bold">New message</span> from Laur
                                                    </h6>
                                                    <p class="text-xs text-secondary mb-0">
                                                        <i class="fa fa-clock me-1"></i>
                                                        13 minutes ago
                                                    </p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="mb-2">
                                        <a class="dropdown-item border-radius-md" href="javascript:;">
                                            <div class="d-flex py-1">
                                                <div class="my-auto">
                                                    <img src="/static/assets/img/small-logos/logo-spotify.svg"
                                                        class="avatar avatar-sm bg-gradient-dark  me-3 ">
                                                </div>
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="text-sm font-weight-normal mb-1">
                                                        <span class="font-weight-bold">New album</span> by Travis Scott
                                                    </h6>
                                                    <p class="text-xs text-secondary mb-0">
                                                        <i class="fa fa-clock me-1"></i>
                                                        1 day
                                                    </p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- End Navbar -->
            <div class="container-fluid px-2 px-md-4">
                <div class="page-header min-height-300 border-radius-xl mt-4"
                    style="background-image: url('/static/image/header.gif');">
                    <span class="mask  opacity-6"></span>
                </div>

                <div class="card card-body mx-3 mx-md-4 mt-n6">
                    <div class="row gx-4 mb-2">
                        <div class="col-auto">
                            <div class="avatar avatar-xl position-relative">
                                <img :src="headAvatar" alt="profile_image" class="w-100 border-radius-lg shadow-sm">
                            </div>
                        </div>
                        <div class="col-auto my-auto col-md-6">
                            <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                                <div class="input-group input-group-outline">
                                    <label class="form-label">文章标题 最长100字符</label>
                                    <input type="text" class="form-control" maxlength="100" v-model="article_title">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 my-sm-auto ms-sm-auto me-sm-0 mx-auto mt-3">
                            <div class="nav-wrapper position-relative end-0">
                                <ul class="nav nav-pills nav-fill p-1" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link mb-0 px-0 py-1 active " data-bs-toggle="tab"
                                            href="javascript:;" role="tab" aria-selected="true" @click="update_content">
                                            <i class="material-icons text-lg position-relative">save</i>
                                            <span class="ms-1">上传文章</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link mb-0 px-0 py-1 " data-bs-toggle="tab" href="javascript:;"
                                            role="tab" aria-selected="false">
                                            <i class="material-icons text-lg position-relative">clear</i>
                                            <span class="ms-1">清空文章</span>
                                        </a>
                                    </li>
                                    <!-- <li class="nav-item">
                                        <a class="nav-link mb-0 px-0 py-1 " data-bs-toggle="tab" href="javascript:;"
                                            @click="changeEditor" role="tab" aria-selected="false">
                                            <i class="material-icons text-lg position-relative">books</i>
                                            <span class="ms-1">切换编辑器</span>
                                        </a>
                                    </li> -->
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="new_editor">
                        <div class="centered" id="content">
                            <div id="test-editor">
                                <textarea style="display:none;" id="tt_area"></textarea>
                            </div>
                        </div>
                    </div>
                    <el-divider content-position="left">封面设置（非必须）</el-divider>
                    <div class="my-auto" style="text-align: center;">
                        <el-upload class="upload-demo" ref="upload" :limit="1" accept=".png, .jpg, .jpeg, .gif"
                            :headers="avatar_header" :action="action" :on-change="loadJsonFromFile"
                            :on-preview="handlePreview" :on-remove="handleRemove" :on-error="avatarFail"
                            :on-exceed="handleExceed" :on-success="avatarSuccess" :file-list="fileList"
                            :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取文章封面</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
                                上传到服务器
                            </el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png等图片文件，且不超过5M （上传成功后会显示在标题左侧哦~）</div>
                        </el-upload>
                    </div>
                    <el-divider content-position="left">其他设置（必须）</el-divider>
                    <div>
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="是否公开">
                                <el-switch v-model="form.delivery"></el-switch>
                            </el-form-item>
                            <el-divider content-position="left">至少一个 至多五个</el-divider>
                            <el-form-item label="文章标签">
                                <el-checkbox-group v-model="form.type" :min="1" :max="5">
                                    <el-checkbox-button v-for="tag in tagOptions" :label="tag" :key="tag" size="small">
                                        {{tag}}
                                    </el-checkbox-button>
                                </el-checkbox-group>
                                <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue"
                                    ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm"
                                    @blur="handleInputConfirm">
                                </el-input>
                                <el-button v-else class="button-new-tag" size="small" @click="showInput">增加标签
                                    （tips:输入后点击其他区域即可生成）
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
            <footer class="footer py-4  ">
                <div class="container-fluid">
                    <div class="row align-items-center justify-content-lg-between">
                        <div class="col-lg-6 mb-lg-0 mb-4">
                            <div class="copyright text-center text-sm text-muted text-lg-start">
                                ©
                                <script>
                                    document.write(new Date().getFullYear())
                                </script>,
                                made with <i class="fa fa-heart"></i> by
                                <a href="https://www.creative-tim.com" class="font-weight-bold" target="_blank">Creative
                                    Tim</a>
                                for a better web.
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <ul class="nav nav-footer justify-content-center justify-content-lg-end">
                                <li class="nav-item">
                                    <a href="https://www.creative-tim.com" class="nav-link text-muted"
                                        target="_blank">Creative Tim</a>
                                </li>
                                <li class="nav-item">
                                    <a href="https://www.creative-tim.com/presentation" class="nav-link text-muted"
                                        target="_blank">About Us</a>
                                </li>
                                <li class="nav-item">
                                    <a href="https://www.creative-tim.com/blog" class="nav-link text-muted"
                                        target="_blank">Blog</a>
                                </li>
                                <li class="nav-item">
                                    <a href="https://www.creative-tim.com/license" class="nav-link pe-0 text-muted"
                                        target="_blank">License</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        <div class="fixed-plugin">
            <a class="fixed-plugin-button text-dark position-fixed px-3 py-2">
                <i class="material-icons py-2">settings</i>
            </a>
            <div class="card shadow-lg">
                <div class="card-header pb-0 pt-3">
                    <div class="float-start">
                        <h5 class="mt-3 mb-0">嗨喽~</h5>
                        <p>配置你想要的主题.</p>
                    </div>
                    <div class="float-end mt-4">
                        <button class="btn btn-link text-dark p-0 fixed-plugin-close-button">
                            <i class="material-icons">clear</i>
                        </button>
                    </div>
                    <!-- End Toggle Button -->
                </div>
                <hr class="horizontal dark my-1">
                <div class="card-body pt-sm-3 pt-0">
                    <!-- Sidebar Backgrounds -->
                    <div>
                        <h6 class="mb-0">侧边栏聚焦</h6>
                    </div>
                    <a href="javascript:void(0)" class="switch-trigger background-color">
                        <div class="badge-colors my-2 text-start">
                            <span class="badge filter bg-gradient-primary active" data-color="primary"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-dark" data-color="dark"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-info" data-color="info"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-success" data-color="success"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-warning" data-color="warning"
                                onclick="sidebarColor(this)"></span>
                            <span class="badge filter bg-gradient-danger" data-color="danger"
                                onclick="sidebarColor(this)"></span>
                        </div>
                    </a>
                    <!-- Sidenav Type -->
                    <div class="mt-3">
                        <h6 class="mb-0">侧边栏样式</h6>
                        <p class="text-sm">选择想要的侧边栏样式</p>
                    </div>
                    <div class="d-flex">
                        <button class="btn bg-gradient-dark px-3 mb-2 active" data-class="bg-gradient-dark"
                            onclick="sidebarType(this)">暗黑</button>
                        <button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-transparent"
                            onclick="sidebarType(this)">透明</button>
                        <button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-white"
                            onclick="sidebarType(this)">白亮</button>
                    </div>
                    <p class="text-sm d-xl-none d-block mt-2">You can change the sidenav type just on desktop view.</p>
                    <!-- Navbar Fixed -->
                    <div class="mt-3 d-flex">
                        <h6 class="mb-0">导航栏固定</h6>
                        <div class="form-check form-switch ps-0 ms-auto my-auto">
                            <input class="form-check-input mt-1 ms-auto" type="checkbox" id="navbarFixed"
                                onclick="navbarFixed(this)">
                        </div>
                    </div>
                    <hr class="horizontal dark my-3">
                    <div class="mt-2 d-flex">
                        <h6 class="mb-0">全局主题[白/黑]</h6>
                        <div class="form-check form-switch ps-0 ms-auto my-auto">
                            <input class="form-check-input mt-1 ms-auto" type="checkbox" id="dark-version"
                                onclick="darkMode(this)">
                        </div>
                    </div>
                    <hr class="horizontal dark my-sm-4">
                    <a class="btn btn-outline-dark w-100" href="">completed welcome blackwhitesite</a>
                </div>
            </div>
        </div>
    </div>
    {% endverbatim myblock %}
    <!--   Core JS Files   -->
    <script src="/static/assets/js/core/popper.min.js"></script>
    <script src="/static/assets/js/core/bootstrap.min.js"></script>
    <script src="/static/assets/js/plugins/perfect-scrollbar.min.js"></script>
    <script src="/static/assets/js/plugins/smooth-scrollbar.min.js"></script>

    <script src="/static/assets/js/my/jquery.js"></script>
    <script src="/static/assets/js/my/vue.min.js"></script>
    <script src="/static/assets/js/my/vue-router.js"></script>
    <script src="/static/assets/js/my/ele.index.js"></script>
    <script src="/static/editormd/js/editormd.js"></script>
    <script src="/static/js/ping.js"></script>
    <script src="/static/js/clickEmoji.js"></script>
    <script src="/static/js/cookieUtil.js"></script>


    <script>
        var win = navigator.platform.indexOf('Win') > -1;
        if (win && document.querySelector('#sidenav-scrollbar')) {
            var options = {
                damping: '0.5'
            }
            Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
        }
    </script>
    <!-- Github buttons -->
    <!-- <script async defer src="https://buttons.github.io/buttons.js"></script>
  Control Center for Material Dashboard: parallax effects, scripts for the example pages etc
  <script src="/static/assets/js/material-dashboard.min.js?v=3.0.0"></script> -->

    <script>
        new Vue({
            el: '#app',
            data: {
                inputVisible: false,
                inputValue: "",
                click_article: "最新",
                tagOptions: ['原创', '转载', '分享', 'Python', '爬虫', 'JS'],
                title: "",
                nick_name: localStorage.getItem("nick_name") === null ? '_' : localStorage.getItem("nick_name"),
                user_avatar: localStorage.getItem("avatar") === null ? '_' : localStorage.getItem("avatar"),
                loading: true,
                action: '/apiArticle/uploadAvatar/',
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                avatar_header: {
                    "token": document.cookie.match(/.*jwtToken=([^;.]*).*$/) === null ? null : document.cookie.match(/.*jwtToken=([^;.]*).*$/)[1],
                    'X-CSRFToken': document.cookie.match(/.*csrftoken=([^;.]*).*$/) === null ? null : document.cookie.match(/.*csrftoken=([^;.]*).*$/)[1]
                },
                headAvatar: '/static/image/default.jpg',
                fileList: [],
                refer: localStorage.getItem('refer'),
                editorAid: localStorage.getItem('editorAid'),
                article_title: "",
            },
            created() {
                if (this.editorAid === null || this.editorAid === undefined) {
                    document.location.href = this.refer || '/pages/homePage.html';
                } else {
                    this.auth();
                }
            },
            mounted() {
                // 动态禁用元素呗
                this.change_sign_status();
            },
            watch: {
            },
            methods: {
                handleClose(tag) {
                    this.tagOptions.splice(this.tagOptions.indexOf(tag), 1);
                },
                showInput() {
                    this.inputVisible = true;
                    this.$nextTick(_ => {
                        this.$refs.saveTagInput.$refs.input.focus();
                    });
                },
                handleInputConfirm() {
                    let inputValue = this.inputValue;
                    if (inputValue) {
                        let regexp = /^[a-zA-Z0-9\u4e00-\u9fa5]{2,15}$/;
                        if (!regexp.test(inputValue)) {
                            this.$message({
                                message: "标签内容长度2-15 不允许空格和特殊字符",
                                type: 'error'
                            });
                        }
                        else if (this.tagOptions.indexOf(inputValue) === -1) {
                            this.tagOptions.push(inputValue);
                        } else {
                            this.$message({
                                message: "该标签已存在 请勿重复添加",
                                type: 'error'
                            });
                        }

                    }
                    this.inputVisible = false;
                    this.inputValue = '';
                },
                getArticleDetail() {
                    this.loading = true;
                    const url = `/apiArticle/myArticles/?pk=${this.editorAid}`;
                    let regexp = /.*csrftoken=([^;.]*).*$/;
                    let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
                    let regexp_token = /.*jwtToken=([^;.]*).*$/;
                    let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
                    fetch(url, {
                        method: 'GET',
                        headers: {
                            'token': token,
                            'X-CSRFToken': xCSRF
                        }
                    })
                        .then(resp => resp.json())
                        .then(json => {
                            if (json.code !== 200) {
                                this.$message({
                                    message: json.message,
                                    type: 'warning'
                                })
                            } else {
                                this.$message({
                                    message: json.message,
                                    type: 'success'
                                });
                                this.article_title = json.data.results[0]["title"];
                                this.old_content = json.data.results[0]['text'];
                                this.headAvatar = json.data.results[0]['head_avatar'];
                                this.form.type = json.data.results[0]['tags'];
                                this.init_editor();
                            }
                            this.loading = false;
                        })
                },
                change_sign_status() {
                    this.nick_name = localStorage.getItem("nick_name") === null ? '_' : localStorage.getItem("nick_name");
                    let self = this;
                    setTimeout(function () {
                        self.loading = false;
                    }, 300)
                },
                logout() {
                    localStorage.removeItem('token');
                    localStorage.removeItem('nick_name');
                    window.clearCookie("jwtToken");
                    this.change_sign_status();
                    document.location.href = '/pages/homePage.html'
                },
                init_editor() {
                    let self = this;
                    this.loading = true;
                    $(function () {
                        var editor = editormd("test-editor", {
                            width: "100%",
                            height: self.clientHeight - 300,
                            path: "/static/editormd/lib/",
                            //上传成功之后的回调
                            onload: function () {
                                self.$message({
                                    message: '初始化成功',
                                    type: 'success'
                                });
                            },
                        });
                        // editor.setValue(self.old_content);
                        self.editor = editor;
                        // console.log(self.old_content);
                        document.getElementById('tt_area').innerHTML = self.old_content;
                        // self.editor.setValue(self.old_content);
                    });
                },
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                },
                handlePreview(file) {
                    console.log(file);
                },
                handleExceed(files, fileList) {
                    this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
                },
                beforeRemove(file, fileList) {
                    return this.$confirm(`确定移除 ${file.name}？`);
                },
                loadJsonFromFile(file, fileList) {
                    this.fileList = fileList
                },
                submitUpload() {
                    this.loading = true;
                    const file = this.fileList[0];
                    if (file === undefined || file === null) {
                        this.$notify.warning({
                            title: '警告',
                            message: '请先选择图片'
                        })
                        this.loading = false;
                        return
                    }
                    const size = file.size / 1024 / 1024
                    if (size > 5) {
                        this.$notify.warning({
                            title: '警告',
                            message: '大小必须小于5M'
                        })
                        this.loading = false;
                        return
                    }
                    this.$refs.upload.submit();
                },
                avatarFail(err, file, fileList) {
                    this.$message({
                        message: JSON.parse(err.message)["message"],
                        type: 'error'
                    });
                    this.fileList = [];
                },
                avatarSuccess(response, file, fileList) {
                    if (response.code !== 200) {
                        this.$confirm(`${response.message}`, '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            localStorage.setItem('refer', document.location.href);
                            document.location.href = '/login.html/';
                        }).catch(() => {
                            this.goBack();
                        });
                        this.fileList = [];
                        this.loading = false;
                        return
                    }
                    this.$message({
                        message: response.message,
                        type: 'success'
                    });
                    this.headAvatar = response.data.url;
                    this.fileList = [];
                    this.loading = false;
                },
                changeEditor() {
                    document.location.href = '/pages/editorBywang.html'
                },
                auth() {
                    this.loading = true;
                    const url = `/apiUser/user/auth/`;
                    let regexp = /.*csrftoken=([^;.]*).*$/;
                    let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
                    let regexp_token = /.*jwtToken=([^;.]*).*$/;
                    let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
                    fetch(url, {
                        method: 'GET',
                        headers: {
                            'token': token,
                            'X-CSRFToken': xCSRF
                        }
                    })
                        .then(resp => resp.json())
                        .then(json => {
                            if (json.code !== 200) {
                                this.$confirm(`${json.message}`, '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning'
                                }).then(() => {
                                    localStorage.setItem('refer', document.location.href);
                                    document.location.href = '/pages/sign-in.html/';
                                }).catch(() => {
                                    this.goBack();
                                });
                            } else {
                                this.page_title = `${json.data.user} 的新发布`;
                                this.getArticleDetail();
                            }
                        })
                },
                // 文章上传
                update_content() {
                    // 获取文本
                    this.loading = true;
                    if (this.form.type.length < 1) {
                        this.$message({
                            message: `请至少选择一个标签`,
                            type: 'error'
                        });
                        this.loading = false;
                        return
                    }
                    const tags = this.form.type.join("|");
                    const title = this.article_title;
                    const content_text = this.editor.getMarkdown();  // 单纯获取文本
                    const content = this.editor.getMarkdown();  // 单纯获取Json
                    if (content.length < 100 || content_text.length < 50 || title.length < 10) {
                        this.$message({
                            message: `标题或内容太少了 再多写点吧`,
                            type: 'error'
                        });
                        this.loading = false;
                        return
                    }
                    const url = `/apiArticle/myArticles/`;
                    let regexp = /.*csrftoken=([^;.]*).*$/;
                    let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
                    let regexp_token = /.*jwtToken=([^;.]*).*$/;
                    let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
                    fetch(url, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'token': token,
                            'X-CSRFToken': xCSRF
                        },
                        body: `title=${encodeURIComponent(title)}&text=${encodeURIComponent(content)}&text_content=${encodeURIComponent(content_text)}&avatar=${this.headAvatar}&aid=${this.editorAid}&mode=2&tags=${tags}`,
                    })
                        .then(resp => resp.json())
                        .then(json => {
                            if (json.code !== 200) {
                                this.loading = false;
                                this.$confirm(`${json.message}`, '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning'
                                }).then(() => {
                                    localStorage.setItem('refer', document.location.href);
                                    document.location.href = this.refer || '/pages/homePage.html/';
                                }).catch(() => {
                                    this.goBack();
                                });
                            } else {
                                this.$message({
                                    message: json.message,
                                    type: 'success'
                                });
                                let self = this;
                                setTimeout(function () {
                                    document.location.href = self.refer || '/pages/homePage.html';
                                }, 2000)
                            }
                        })
                },
            }
        })
    </script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
    <script src="/static/assets/js/material-dashboard.min.js?v=3.0.0"></script>
    <script src="https://myhkw.cn/api/player/1636018876119" id="myhk" key="1636018876119" m="1"></script>

</body>

</html>